<!-- @format -->

<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <slot name="thead"></slot>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr
        v-for="(item, idx) in list"
        :key="item.id">
        <!-- 在slot上绑定自定义属性，携带数据给插槽 -->
        <slot
          :row="item"
          :i="idx"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    name: 'MyTable',
    props: {
      list: {
        type: Array,
        required: true
      }
    }
  }
</script>

<style scoped lang="less">
  .my-goods-list {
    .badge {
      margin-right: 5px;
    }
  }
</style>
